<template>
  <div class="page">
    <a-form-model layout="inline" class="form section custom" @submit="submit" @reset="reset" :model="model">
      <template v-if="paramsLayout">
        <a-row :gutter="gutter" :type="model.instId ? rowType : 'flex'" :justify="model.instId ? rowJustify : 'left'">
          <a-col :span="formItemSpan">
            <a-form-model-item label="法人行" prop="instId">
              <a-select v-if="this.currentUser.admin" placeholder="输入法人机构标识" v-model="model.instId" @change="submit">
                <a-select-option v-for="i in organizations" :key="i.value" :value="i.value">{{i.name}}</a-select-option>
              </a-select>
              <a-input v-if="!this.currentUser.admin" v-model="model.instId" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <template v-if="model.instId">
            <slot name="params"></slot>
          </template>
        </a-row>
      </template>
      <template v-else>
        <a-col :span="formItemSpan">
          <a-form-model-item label="法人行" prop="instId">
            <a-select v-if="this.currentUser.admin" placeholder="输入法人机构标识" v-model="model.instId" @change="submit">
              <a-select-option v-for="i in organizations" :key="i.value" :value="i.value">{{i.name}}</a-select-option>
            </a-select>
            <a-input v-if="!this.currentUser.admin" v-model="model.instId" :disabled="true"/>
          </a-form-model-item>
        </a-col>
        <template v-if="model.instId">
          <slot name="params"></slot>
        </template>
      </template>
    </a-form-model>
    <template v-if="model.instId">
      <slot></slot>
    </template>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import {mapState} from "vuex";
export default {
  name: 'BaseView',
  data: function () {
    this.lastFetchId = 0;
    this.debounceSearch = debounce(this.debounceSearch, 800);
    return {
      organizations: [],
    }
  },
  props: {
    paramsLayout: Boolean,
    model: {
      type: Object,
    },
    gutter: {
      type: Number,
      default: 20
    },
    formItemSpan: {
      type: Number,
      default: 8,
    },
    rowType: String,
    rowJustify: String
  },
  computed: {
      ...mapState({
          currentUser: state => state.account.user
      })
  },
  methods: {
    submit() {
      this.$emit('submit', ...arguments)
    },
    reset() {
      this.$emit('reset', ...arguments)
    },
    async debounceSearch () {
      this.lastFetchId += 1;
      const fetchId = this.lastFetchId;
      this.selectOptions = [];
      this.loading = true;
      this.$get('admin/upmporg/getInstList').then((r) => {
        this.organizations = r.data.map(i => {
          i.name = i.label + '-' + i.value
          i.value = i.label
          return i
        })
      })
    }
  },
  mounted () {
      // debugger
      console.log("baseview");
      console.log(this.currentUser);
      console.log(this.model);
      if(!this.currentUser.admin){
          this.model.instId = this.currentUser.instId;
      }
    this.debounceSearch();
  }
}
</script>

<style scoped>
.page {
  width: 100%;
}
.form {
  text-align: center;
}
.section {
  background: #fff;
  clear: both;
}
.select {
  width: 200px;
}

</style>
